<script setup lang="ts">
import { computed, onActivated, ref } from 'vue';
import { i18nTranslate, setLang ,LANG_CONFIG } from '/@/i18n';
import { useRouter } from 'vue-router';
import { getUserInfo, getBalances, loginOut, getTodayProfit } from '/@/apis/userApi';
import { useToken, useUserId } from '/@/hooks';
import { useRequest } from 'vue-request';
import { NotifyWarn } from '/@/utils';
const userInfo = ref(<any>{});
const { getUserId, setUserId } = useUserId();
const { setToken } = useToken();
const router = useRouter();
const assetsBalance = ref(0);
const assetsBlockedBalance = ref(0);
const totalProfit = ref(0);
const dialogShow = ref(false);
const languagePopup = ref(false);
const platform = ref(<any>{});
const aboutShow = ref(false);
const onSelect = (e: any) => {
  setLang(e.lang);
  languagePopup.value = false;
};
const menuList1 = ref([
  { icon: 'teams-icon1.png', name: 'AboutUs', link: 'https://h-kai.com' },
  { icon: 'bank-icon.png', name: 'Wallet', link: '/me/bank' },
  { icon: 'kyc-icon.png', name: 'KYC', link: '/me/kyc' },
  { icon: 'support-icon.png', name: 'customer', link: '/me/customer' },
]);
const menuList2 = ref([
  {
    icon: 'pwd-icon.png',
    name: 'Passwordsettings',
    link: '/me/passwordSettings',
  },
  { icon: 'about-icon.png', name: 'AboutUs', link: 'me/aboutUs' },
  { icon: 'guide-icon.png', name: 'BeginnerGuide', link: 'me/beginnerGuide' },
  { icon: 'language-icon.png', name: 'Selectalanguage', link: '' },
]);
function loginOutCustom() {
  useRequest(loginOut, {
    defaultParams: [{ member: getUserId() }],
    onSuccess() {
      setUserId('');
      setToken('');
      router.push('/login');
    },
  });
}
const init = () => {
  useRequest(getUserInfo, {
    defaultParams: [{ member: getUserId() }],
    onSuccess(data: any) {
      userInfo.value = data;
    },
  });
  useRequest(getTodayProfit, {
    defaultParams: [{ member: getUserId() }],
    onSuccess(data: any) {
      if (!data) {
        return;
      }
      totalProfit.value = data.totalProfitAmount.toFixed(2);
    },
  });
  useRequest(getBalances, {
    defaultParams: [{ member: getUserId(), currency: 'USD' }],
    onSuccess(data: any) {
      if (!data) {
        return;
      }
      if (data.length) {
        assetsBalance.value = data[0].assetsBalance.toFixed(2);
        assetsBlockedBalance.value = data[0].assetsBlockedBalance.toFixed(2);
      }
    },
  });
};

const onTopage = (menu: any) => {
  if (menu.link.indexOf('http')>=0 || menu.link.indexOf('https')>=0) {
    aboutShow.value = true;
    // window.location.href = menu.link;
    return
  }
  if (menu.name === 'Selectalanguage') {
    languagePopup.value = true ;
    return;
  } 
 
  router.push(menu.link);
};
const onToWithdraw =  () => {
   // 未实名认证不能提现
   if ( userInfo.value.cardState != 'PASS') {
    if (userInfo.value.cardState === 'WAIT') {
      NotifyWarn(i18nTranslate('Pleasewaitfortherealnameauthenticationauditresult'));
    } else {
      NotifyWarn(i18nTranslate('Pleaseauthenticatewithrealnamefirst'));
      router.push('/me/kyc');
    }
    return;
  }
  // 未绑定银行卡不能提现
  if (!(userInfo.value.bankCard || userInfo.value.moneyAddr)) {
    NotifyWarn(i18nTranslate('Pleasebindthebankcardfirst'));
    router.push('/me/bank');
    return;
  }
  router.push('/me/withdraw');
}
 init();
</script>

<template>
  <div>
    <div class="me_page">
      <div class="user_info">
        <div class="user_avater">
          <img :src="$img('avatar.png')" />
        </div>
        <div>
          <p>{{ userInfo.phone }}</p>
          <div class="user_uid">
            <p> {{ $t('UID') }} : {{ userInfo.uuid }}</p>
          </div>
        </div>
      </div>
      <div class="wallet_info">
        <div>
          <div>
            <p> {{ $t('Availablefunds') }} </p>
            <p class="funds"> {{ assetsBalance || 0 }}</p>
          </div>
          <div class="total_profit">
            <p>{{ $t('Totalprofit') + '($)' }}</p>
            <p class="funds"> {{ totalProfit || 0 }} </p>
          </div>
        </div>
        <div class="wallet_info_bottom">
          <div>
            <p>{{ $t('Freezefunds') + '($)' }}</p>
            <p class="font_bold">{{ assetsBlockedBalance || 0 }}</p>
          </div>
          <div class="flex-between">
            <div class="btns recharge" @click="$router.push('/me/recharge')">
              <Icon class="btns-icon" name="icon-recharge2"></Icon>
              <p> {{ $t('Deposit') }}</p>
            </div>
            <div class="btns withdraw" @click="onToWithdraw">
              <Icon class="btns-icon" name="icon-chaji"></Icon>
              <p> {{ $t('Withdraw') }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="top_menu">
        <div
          class="menu_item"
          v-for="(item, index) in menuList1"
          @click="onTopage(item)"
          :key="index"
        > 
            <div class="menu_icon">
              <img :src="$img('me/' + item.icon + '')" />
            </div>
            <div> {{ $t(item.name) }}</div>
        </div>
      </div>
      <div class="menu">
        <div
          class="menu_item"
          v-for="(item, index) in menuList2"
          @click="onTopage(item)"
          :key="index"
        >
          <div class="menu_left">
            <div class="menu_icon">
              <img :src="$img('me/' + item.icon + '')" />
            </div>
            <div> {{ $t(item.name) }}</div>
          </div>
          <div class="more_icon">
            <Icon name="icon-lujing"></Icon>
          </div>
        </div>
      </div>
      <div class="logout_btn" @click="dialogShow = true">
        {{ $t('Logout') }}
      </div>
    </div>
    <van-dialog
      v-model:show="dialogShow"
      :cancelButtonText="$t('Cancel')"
      :confirmButtonText="$t('Confirm')"
      :message="$t('Areyousureyouwanttologout')"
      show-cancel-button
      @confirm="loginOutCustom"
    />
    <van-popup v-model:show="aboutShow" closeable :close-on-click-overlay="false" round>
      <div class="about_popup_box">
        <iframe src="https://h-kai.com" width="340px" height="100%" style="border:none;">  
         </iframe>  
      </div>
    </van-popup>
     <!--语言切换弹出层 -->
     <van-action-sheet class="actionSheet" v-model:show="languagePopup" :actions="LANG_CONFIG" @select="onSelect" />
  </div>
</template>

<style lang="scss" scoped>
.me_page {
  padding-top: 30px;
  .user_info {
    margin: 0 30px;
    @include align-center;

    .user_avater {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      margin-right: 20px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .user_uid {
      margin-top: 20px;
      @include align-center;
    }
  }

  .wallet_info {
    margin: 32px 25px 38px 42px;
    box-sizing: border-box;
    padding: 38px;
    background: rgb(0, 99, 245);
    border-radius: 15px;
    font-size: 26px;
    color: #fff;
    & > div {
      display: flex;
      justify-content: space-between;
    }
    .funds {
      font-weight: 700;
      font-size: 36px;
      margin-top: 5px;
    }

    .wallet_info_bottom {
      display: flex;
      margin-top: 52px;
      justify-content: space-between;

      .font_bold {
        font-weight: 800;
        font-size: 36px;
        margin-top: 18px;
      }

      .totalprofit {
        min-width: 240px;
      }
      .btns {
        min-width: 148px;
        height: 76px;
        border-radius: 38px;
        font-size: 24px;
        @include center;
        flex-direction: column;
        .btns-icon {
          font-size: 26px;
          margin-bottom: 3px;
        }
        &.withdraw {
          background: rgb(255, 255, 255, 0.25);
          color: #fff;
        }
        &.recharge {
          background: rgb(255, 255, 255);
          color: rgb(0, 99, 245);
          margin-right: 18px;
        }
      }
    }
  }
  .top_menu {
    background: #242424;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    margin: 20px 30px;
    padding: 42px 37px 35px 38px;
    .menu_item {
      color: rgba(255,255,255, 0.85);
      display: flex;
      flex-direction: column;
      align-items: center;
      .menu_icon {
        width: 40px;
        height: 40px;
        margin-bottom: 15px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .menu {
    background: #242424;
    margin: 0 30px;
    border-radius: 20px;
    .mt_10 {
      margin-top: 10px;
    }

    .menu_item {
      @include align-center;
      justify-content: space-between;
      margin: 0 26px;
      max-height: 98px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);;
      &:last-child {
        border: 0
      }
      .menu_left {
        @include align-center;
        height: 98px;
        color: rgba(255, 255, 255, 0.85);
      }

      .menu_icon {
        width: 40px;
        height: 40px;
        margin-right: 30px;
        
        img {
          width: 100%;
          height: 100%;
        }
      }

      .more_icon {
        .icon-lujing {
          font-size: 20px;
          color: #666;
        }
      }
    }
  }

  .user_uid_copy {
    width: 26px;
    height: 26px;
    margin-left: 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .logout_btn {
    @include center;
    height: 88px;
    background: rgb(36, 36, 36);
    border-radius: 16px;
    font-size: 30px;
    color: #fff;
    margin: 68px 30px;
  }
}
.about_popup_box {
    padding-top: 50px;
    height: 90vh;
  }
</style>

<style lang="scss">
    .van-dialog {
      background: #242424;
      color: #fff;
    }
    .van-button--default,.van-dialog__message {
      color: #fff;
    }
    .van-dialog__confirm {
      color: $primary;
    }
    .van-button--default,.van-dialog__confirm{
      background: #242424;
     
  }
  .actionSheet {
    .van-action-sheet__content {
      padding: 50px 20px;
      background-color: #242424;
      .van-action-sheet__item {
        background-color: #242424;
        color: #ffffff;
      }
    }
  }
</style>